<!--
 * @Descripttion:
 * @Author: Silence
 * @Date: 2023-05-25 09:08:39
 * @LastEditors: Silence
 * @LastEditTime: 2023-05-25 10:26:43
-->
<template>
  <div>
    <h2>物流相关信息</h2>
    <div class="logistics-info-header">
      <div class="logistics-info-header-left">
        <div class="logistics-status blue" v-statu="data.logisticsStatus">
        </div>
        <div class="logistics-company">{{ data.logisticsCompany }}</div>
        <div class="logistics-no">{{ data.logisticsNo }}</div>
      </div>
    </div>
    <ul class="logistics-info-list">
      <li v-for="item in data.logisticsInfo" :key="item.time">
        <div class="logistics-info-list-time">{{ item.time }}</div>
        <div class="logistics-info-list-content">{{ item.content }}</div>
      </li>
    </ul>
    <button>查看物流详情</button>
  </div>
</template>
<script>
export default {
  props: {
    data: Object
  },
  directives: {
    statu: {
      inserted (el, val) {
        console.log(val)
        if (val.value === 0) {
          el.innerHTML = '未发货'
        } else if (val.value === 1) {
          el.innerHTML = '已发货'
        } else if (val.value === 2) {
          el.innerHTML = '已签收'
        } else {
          el.innerHTML = '未签收'
        }
      },
      update (el, val) {
        if (val === 0) {
          this.logisticsStatus = '未发货'
        } else if (val === 1) {
          this.logisticsStatus = '已发货'
        } else if (val === 2) {
          this.logisticsStatus = '已签收'
        } else {
          this.logisticsStatus = '未签收'
        }
      }
    }
  },
  data () {
    return {
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
</style>
